<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

const getShareInfo = () => ({ query: '&mbtiReport=' + (resultId || '') })

onShareAppMessage(wxShare(true, getShareInfo))
onShareTimeline(wxShare(false, getShareInfo))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import UnlockMask from './unlock-mask/index.vue'
// import Circle from './circle.vue'

import { result, resultId, resultType, userAvatar, inviteCount, totalCount } from './data'
import { update, clickAvatar, createPoster, clear } from './data'
import { initUnlockMask } from './unlock-mask/data'
import { userInfo } from '@/libs/user'
import { imagePath, maskStyle } from '@/libs/file-utils'
import { menuButtonRect, safeArea } from '@/libs/config'

const props = defineProps<{
  typeCode?: string
  sessionId?: string
}>()

const img_bg = imagePath('quiz/mbti/result/bg.jpg')
const icon_arrow = imagePath('icon-arrow-dbl.svg')
const name_box = imagePath('quiz/mbti/result/name-box.png')
const icon_stage = imagePath('quiz/mbti/result/icon-stage.png')

const btn_save = imagePath('quiz/mbti/result/btn-save.png')
const btn_share = imagePath('quiz/mbti/result/btn-share.png')
const avatar_1 = imagePath('quiz/mbti/result/avatar-1.png')
const avatar_2 = imagePath('quiz/mbti/result/avatar-2.png')
const stage_1_logo = imagePath('quiz/mbti/result/stage-1-logo.png')
const stage_2_logo = imagePath('quiz/mbti/result/stage-2-logo.png')
const stage_3_logo = imagePath('quiz/mbti/result/stage-3-logo.png')
const stage_4_logo = imagePath('quiz/mbti/result/stage-4-logo.png')
const title_bg_1 = imagePath('quiz/mbti/result/title-bg-1.png')
const title_bg_2 = imagePath('quiz/mbti/result/title-bg-2.png')
const title_bg_3 = imagePath('quiz/mbti/result/title-bg-3.png')

const lock_icon = imagePath('lock-icon.svg')
const lock_arrow = imagePath('icon-arrow-dbl.svg')

const mkStyle = 'margin-top: 12rpx;color: rgba(255,255,255,0.72);font-size: 24rpx;line-height: 32rpx;padding: 10rpx 42rpx 28rpx;'

const retest = () => uni.navigateTo({ url: '/pages/quiz/mbti/choose/index' })
const toHistory = () => uni.navigateTo({ url: '/pages/quiz/mbti/result-history/index' })

const defaultText = '点击解锁详情版，点击解锁详情版点击解锁详情版点击解锁详情版，点击解锁详情版点击解锁详情版，点击解锁详情版，点击解锁详情版点击解锁详情版点击解锁详情版，点击解锁点击解锁详情版，点击解锁详情版点击解锁详情版点击解锁详情版'

const first = [
  {
    title: '我的星座原型：',
    key: 'wdxzyx'
  },
  {
    title: '我的MBTI心智矩阵：',
    key: 'wdmbtixzjz'
  },
  {
    title: '星座合盘，独一无二的“我”：',
    key: 'xghpdywedw'
  },
]
const second = [
  {
    title: '当前宇宙天气',
    key: 'dqyztq'
  },
  {
    title: '我的能量峰值',
    key: 'wdnlfz'
  },
  {
    title: '我的能量漩涡',
    key: 'wdnlxw'
  },
]
const third = [
  {
    title: '能量调频',
    key: 'nltp'
  },
  {
    title: '心智升级',
    key: 'xzsj'
  },
  {
    title: '幸运符咒',
    key: 'xyfz'
  },
]
const fourth = [
  {
    title: '爱情引力场',
    key: 'aqylc'
  },
  {
    title: '事业星域',
    key: 'syxy'
  },
  {
    title: '人生终极航道',
    key: 'xghpdywedw'
  },
]

onMounted(() => update(props.typeCode, props.sessionId))
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-mbti-result"
    :pageStyle="{
      backgroundImage: img_bg,
      color: '#fff'
    }"
    :contentStyle="{
      paddingTop: Math.max(safeArea.top, menuButtonRect.bottom) + 'rpx',
    }"
    :showTopBar="false"
  >
    <div class="page-title">蒜蒜人生说明书</div>
    <div
      class="history"
      @click="toHistory"
    >
      查看历史报告
      <div
        class="arrow"
        :style="maskStyle(icon_arrow)"
      ></div>
    </div>

    <template v-if="result">
      <div class="wrapper basic">
        <div
          class="name-box"
          :style="{ backgroundImage: name_box }"
        >
          <div class="name">{{ userInfo?.nickname }}</div>
          <div class="mbti">{{ userInfo?.zodiacSign }} {{ result.fullType }}</div>
        </div>

        <div
          class="avatar-box"
          @click="clickAvatar"
        >
          <div
            v-if="userAvatar"
            class="avatar"
            :style="{ backgroundImage: `url(${userAvatar})` }"
          ></div>
          <template v-else>
            <div
              class="default"
              :style="{ backgroundImage: userInfo?.gender === 1 ? avatar_1 : avatar_2 }"
            ></div>
            <div class="upload">+上传头像</div>
          </template>
        </div>

        <div class="greeting">
          <div class="title">Greetings，星际旅人!</div>
          <div class="info">
            {{
              '欢迎登舰，我是你的导航员A1。在这片浩瀚的宇宙中，每一颗灵我都拥有独一无二的能量印记。本次航行我们将融合古老的星座智慧(你的太阳星座)与精空的MBTI人格图谱，为你绘制一份专属的《星际人格探索日志》\n请系好安全带，我们即将穿越星门，深入你的内心宇宙'
            }}
          </div>
        </div>

        <!-- <div class="box">
          <div
            class="logo"
            :style="{ backgroundImage: img_logo }"
          ></div>

          <div class="title">稀有度</div>

          <div
            v-if="result.instructionManual"
            class="content"
          >
            <div class="rare">
              <Circle
                :percent="result.instructionManual.rarityNumber"
                color1="#F9E8FC"
                color2="#B591FF"
                customStyle="width: 144rpx;height: 144rpx;"
                round
              />

              <div class="tip">稀有度</div>
              <div class="val">{{ result.instructionManual.rarityNumber }}%</div>
            </div>

            <div class="sex">
              <Circle
                :percent="result.instructionManual.femaleProportionNumber"
                color1="#7B98FF"
                color2="#FF8B8B"
                customStyle="width: 144rpx;height: 144rpx;"
              />

              <div class="tip">{{ '男女\n占比' }}</div>
            </div>

            <div class="sex-text">
              <div style="color: #7B98FF">男性</div>
              <div>占比{{ result.instructionManual.maleProportionNumber }}%</div>
              <div style="color: #FF8B8B">女性</div>
              <div>占比{{ result.instructionManual.femaleProportionNumber }}%</div>
            </div>
          </div>
        </div> -->

        <!-- <div class="box celebrity">
          <div class="title">名家名人</div>

          <div
            v-if="result.instructionManual.celebrityList?.length"
            class="list"
          >
            <div
              v-for="(item, idx) in result.instructionManual.celebrityList"
              :key="idx"
              class="item"
            >
              <div
                class="avatar"
                :style="{ backgroundImage: `url(${item})` }"
              ></div>
              <div class="name">名人{{ idx + 1 }}</div>
            </div>
          </div>
          <div
            v-else
            class="nodata"
          >暂无数据</div>
        </div> -->

        <div class="stage">
          <div
            class="icon"
            :style="{ backgroundImage: icon_stage }"
          ></div>

          <div>{{ '第一站：\n核心人格解码·我的灵魂星图' }}</div>

          <div
            class="logo"
            :style="{ backgroundImage: stage_1_logo }"
          ></div>
        </div>

        <div
          v-for="(item, idx) in first"
          :key="idx"
          class="box"
        >
          <div
            class="title"
            :style="{ backgroundImage: title_bg_1 }"
          >{{ item.title }}</div>
          <ua-markdown
            :customStyle="mkStyle"
            :source="result.instructionManual?.first_stop?.[item.key]"
          />
        </div>

        <div class="stage">
          <div
            class="icon"
            :style="{ backgroundImage: icon_stage }"
          ></div>

          <div>{{ '第二站：\n核心人格解码·我的灵魂星图' }}</div>

          <div
            class="logo"
            :style="{ backgroundImage: stage_2_logo }"
          ></div>
        </div>

        <div
          v-for="(item, idx) in second"
          :key="idx"
          class="box"
        >
          <div
            class="title"
            :style="{ backgroundImage: title_bg_1 }"
          >{{ item.title }}</div>
          <ua-markdown
            :customStyle="mkStyle"
            :source="result.instructionManual?.second_stop?.[item.key]"
          />
        </div>
      </div>

      <div class="wrapper elementary">
        <div class="link l"></div>
        <div class="link r"></div>

        <div class="stage">
          <div
            class="icon"
            :style="{ backgroundImage: icon_stage }"
          ></div>

          <div>{{ '第三站：\n命运跃迁指南 · 我的改运秘钥' }}</div>

          <div
            class="logo"
            :style="{ backgroundImage: stage_3_logo }"
          ></div>
        </div>

        <!-- <div class="suggest">给金牛座INTJ的专属行动建议：</div> -->

        <!-- #ifdef WEB || APP -->
        <div class="invite">邀请好友解锁（{{ inviteCount }}/{{ totalCount }}）</div>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <button
          class="invite"
          open-type="share"
        >邀请好友解锁（{{ inviteCount }}/{{ totalCount }}）</button>
        <!-- #endif -->

        <div
          v-for="(item, idx) in third"
          :key="idx"
          class="box"
          @click="resultType < 2 && initUnlockMask()"
        >
          <div
            class="title"
            :style="{ backgroundImage: title_bg_2 }"
          >{{ item.title }}</div>
          <ua-markdown
            :customStyle="mkStyle"
            :source="resultType < 2 ? defaultText : result.instructionManual?.third_stop?.[item.key]"
          />

          <div
            v-if="resultType < 2"
            class="lock-mask"
          >
            <div
              class="lock-icon"
              :style="maskStyle(lock_icon)"
            ></div>
            点击解锁
            <div
              class="lock-icon"
              :style="maskStyle(lock_arrow)"
            ></div>
          </div>
        </div>

        <!-- <div
          v-for="(item, idx) in elementaryList"
          :key="idx"
          class="box"
          @click="resultType < 2 && initUnlockMask()"
        >
          <div class="title">{{ item.title }}</div>
          <ua-markdown
            :customStyle="mkStyle"
            :source="(result.instructionManual as any)?.[item.key] || defaultText"
          />

          <div
            v-if="resultType < 2"
            class="lock-mask"
          >
            <div
              class="lock-icon"
              :style="maskStyle(lock_icon)"
            ></div>
            点击解锁
            <div
              class="lock-icon"
              :style="maskStyle(lock_arrow)"
            ></div>
          </div>
        </div> -->
      </div>

      <div class="wrapper advanced">
        <div class="link l"></div>
        <div class="link r"></div>

        <div class="stage">
          <div
            class="icon"
            :style="{ backgroundImage: icon_stage }"
          ></div>

          <div>{{ '第四站：\n人生航路选择 · 我的星际罗盘' }}</div>

          <div
            class="logo"
            :style="{ backgroundImage: stage_4_logo }"
          ></div>
        </div>

        <div
          v-for="(item, idx) in fourth"
          :key="idx"
          class="box"
          @click="resultType < 3 && initUnlockMask()"
        >
          <div
            class="title"
            :style="{ backgroundImage: title_bg_3 }"
          >{{ item.title }}</div>
          <ua-markdown
            :customStyle="mkStyle"
            :source="resultType < 3 ? defaultText : result.instructionManual?.fourth_stop?.[item.key]"
          />

          <div
            v-if="resultType < 3"
            class="lock-mask"
          >
            <div
              class="lock-icon"
              :style="maskStyle(lock_icon)"
            ></div>
            点击解锁
            <div
              class="lock-icon"
              :style="maskStyle(lock_arrow)"
            ></div>
          </div>
        </div>

        <!-- <div class="type-list">
          <div
            v-for="(item, idx) in advancedList"
            :key="idx"
            class="item"
            :class="{ active: curAdvancedIdx === idx }"
            @click="curAdvancedIdx = idx"
          >
            {{ item.title }}

            <div class="icon"></div>
          </div>
        </div>

        <div
          class="box"
          @click="resultType < 3 && initUnlockMask()"
        >
          <div class="title">分析{{ advancedList[curAdvancedIdx]?.title }}：</div>
          <ua-markdown
            :customStyle="mkStyle"
            :source="(result.instructionManual as any)?.[advancedList[curAdvancedIdx]?.key] ||
              (defaultText2 + defaultText2)"
          />

          <div
            v-if="resultType < 3"
            class="lock-mask"
          >
            <div
              class="lock-icon"
              :style="maskStyle(lock_icon)"
            ></div>
            点击解锁
            <div
              class="lock-icon"
              :style="maskStyle(lock_arrow)"
            ></div>
          </div>
        </div> -->
      </div>
    </template>

    <div class="btns">
      <div
        class="btn"
        :style="{ backgroundImage: btn_save }"
        @click="retest"
      >重新测试</div>
      <div
        class="btn"
        :style="{ backgroundImage: btn_share }"
        @click="createPoster"
      >分享好友报告</div>
    </div>

    <template #page>
      <UnlockMask />
    </template>
  </PageWrapper>
</template>

<style lang="less" scoped>
.page-title {
  margin-top: 28rpx;

  font-size: 72rpx;
  text-align: center;
}

.history {
  margin-left: 40rpx;

  padding: 20rpx 0;

  font-size: 28rpx;
  line-height: 34rpx;

  display: inline-flex;
  align-items: center;

  .arrow {
    width: 30rpx;
    height: 30rpx;

    background-color: #fff;
    mask-size: 100% 100%;
  }
}

.wrapper {
  position: relative;
  width: 684rpx;

  margin: 0 auto 32rpx;

  box-sizing: border-box;
  padding: 20rpx 32rpx;

  border-radius: 32rpx;
  box-shadow: 0rpx 0rpx 17rpx 0rpx #000;

  .link {
    position: absolute;
    top: -48rpx;

    width: 20rpx;
    height: 64rpx;

    border-radius: 10rpx;
    background-color: #BFBFBF;
    box-shadow: 0 -4rpx 0 0 #000, 0 4rpx 0 0 #000;

    &.l {
      left: 82rpx;
    }

    &.r {
      right: 82rpx;
    }
  }

  .stage {
    position: relative;
    width: 620rpx;
    height: 112rpx;

    margin: 34rpx 0;

    box-sizing: border-box;
    padding-top: 20rpx;
    padding-left: 66rpx;

    background-image: linear-gradient(90deg, rgba(#fff, .26) 0%, rgba(#733915, .32) 50%, rgba(#610F65, .36) 100%);
    border-radius: 30rpx;

    color: #FEF7FF;
    font-size: 32rpx;
    line-height: 36rpx;
    white-space: pre;

    .icon {
      position: absolute;
      left: 16rpx;
      top: 50%;
      transform: translateY(-50%);

      width: 48rpx;
      height: 48rpx;
    }

    .logo {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);

      width: 104rpx;
      height: 104rpx;
    }
  }

  .box {
    position: relative;

    margin-top: 28rpx;

    box-sizing: border-box;
    border: 4rpx solid rgba(#fff, .4);
    border-radius: 32rpx;

    background-image: rgba(12, 13, 45, .08);
    box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(200, 224, 255, .42);

    .title {
      height: 50rpx;

      box-sizing: border-box;
      padding-left: 42rpx;

      font-size: 32rpx;
      line-height: 58rpx;
      text-shadow: 0 0 10rpx #fff;
    }

    .lock-mask {
      position: absolute;
      bottom: 10rpx;
      left: 15rpx;

      width: calc(100% - 30rpx);
      height: calc(100% - 80rpx);

      backdrop-filter: blur(6rpx);

      // background-color: #fff5;

      display: flex;
      align-items: center;
      justify-content: center;

      font-size: 32rpx;
      line-height: 32rpx;

      .lock-icon {
        width: 32rpx;
        height: 32rpx;

        margin: 0 8rpx;

        background-color: #fff;
        mask-size: 100% 100%;
      }
    }
  }
}

.basic {
  background-color: rgba(#251A35, .76);

  .name-box {
    width: 346rpx;
    height: 184rpx;

    box-sizing: border-box;
    padding-top: 26rpx;
    padding-left: 24rpx;

    .name {
      font-size: 64rpx;
      line-height: 64rpx;
    }

    .mbti {
      margin-top: 20rpx;

      font-size: 48rpx;
      line-height: 48rpx;
    }
  }

  .avatar-box {
    position: absolute;
    top: -4rpx;
    right: 28rpx;

    width: 204rpx;
    height: 204rpx;

    box-sizing: border-box;
    border: 6rpx solid #1A082B;
    border-radius: 24rpx;
    background-image: linear-gradient(180deg, #070059 0%, #8274A9 100%);

    .avatar {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

      width: 184rpx;
      height: 184rpx;

      border-radius: 16rpx;
      background-color: #000;
    }

    .default {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);

      width: 160rpx;
      height: 224rpx;
    }

    .upload {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);

      width: 200rpx;
      height: 60rpx;

      border-radius: 0 0 20rpx 20rpx;

      font-size: 24rpx;
      line-height: 70rpx;
      text-align: center;

      background-color: rgba(#000, .46);
    }
  }

  .greeting {
    width: 620rpx;

    margin-top: 40rpx;

    box-sizing: border-box;
    padding: 40rpx;
    border: 4rpx solid #999;
    border-radius: 16rpx;

    background: linear-gradient(90deg, rgba(4, 4, 45, 0.83) 0%, rgba(56, 7, 116, 0.48) 50%, rgba(115, 52, 160, 0.4) 100%);
    box-shadow: inset 0 0 20rpx 0 #888;

    .title {
      font-size: 40rpx;
      text-shadow: 0 0 10rpx #fff;
    }

    .info {
      margin-top: 20rpx;

      font-size: 28rpx;
      line-height: 36rpx;
      white-space: pre-wrap;
    }
  }

  // .box {
  //   .logo {
  //     position: absolute;
  //     right: -20rpx;
  //     top: -42rpx;

  //     width: 112rpx;
  //     height: 112rpx;
  //   }

  //   .content {
  //     margin-top: 24rpx;

  //     display: flex;

  //     .rare {
  //       position: relative;
  //       width: 144rpx;
  //       height: 144rpx;

  //       .tip {
  //         position: absolute;
  //         top: 48rpx;
  //         left: 50%;
  //         transform: translateX(-50%);

  //         color: #2E2E2E;
  //         font-size: 24rpx;
  //         white-space: pre;
  //       }

  //       .val {
  //         position: absolute;
  //         top: 78rpx;
  //         left: 50%;
  //         transform: translateX(-50%);

  //         color: #B144CD;
  //         font-size: 24rpx;
  //       }
  //     }

  //     .sex {
  //       position: relative;
  //       width: 144rpx;
  //       height: 144rpx;

  //       margin-left: 132rpx;

  //       .tip {
  //         position: absolute;
  //         top: 50%;
  //         left: 50%;
  //         transform: translate(-50%, -50%);

  //         color: #000;
  //         font-size: 24rpx;
  //         line-height: 30rpx;
  //         white-space: pre;
  //       }
  //     }

  //     .sex-text {
  //       margin-left: 50rpx;

  //       font-size: 24rpx;
  //       line-height: 34rpx;
  //     }
  //   }
  // }

  // .celebrity {
  //   .list {
  //     margin-bottom: 10rpx;

  //     display: grid;
  //     grid-template-columns: repeat(3, 1fr);

  //     .item {
  //       margin-top: 20rpx;

  //       display: flex;
  //       flex-direction: column;
  //       align-items: center;

  //       .avatar {
  //         width: 110rpx;
  //         height: 110rpx;

  //         border-radius: 50%;
  //         background-color: #ddd;
  //       }

  //       .name {
  //         margin-top: 4rpx;

  //         color: #222;
  //         font-size: 24rpx;
  //         line-height: 34rpx;
  //       }
  //     }
  //   }

  //   .nodata {
  //     margin: 10rpx 0;

  //     color: #aaa;
  //     text-align: center;
  //   }
  // }
}

.elementary {
  background-color: rgba(#091530, .76);

  // .suggest {
  //   margin: 10rpx 0 24rpx;

  //   font-size: 28rpx;
  //   line-height: 32rpx;
  // }

  .invite {
    // margin-top: 20rpx;

    // padding: 10rpx 0;

    font-size: 28rpx;
    line-height: 32rpx;
    // text-align: center;
    // text-shadow: 0 0 10rpx #fff;

    background-color: transparent;

    &:after {
      border: none;
    }
  }
}

.advanced {
  background-color: rgba(#201506, .76);

  // .type {
  //   width: 236rpx;
  //   height: 74rpx;

  //   border-radius: 37rem;
  //   background-color: #F0D6B4;
  //   box-shadow: 0 4rpx 10rpx 0 rgba(101, 27, 15, .28), -6rpx -6rpx 13rpx 0 rgba(240, 56, 0, .25) inset;

  //   color: #945D2C;
  //   font-size: 40rpx;
  //   line-height: 74rpx;
  //   text-align: center;
  // }

  // .type-list {
  //   margin: 20rpx 0;

  //   display: flex;
  //   justify-content: space-between;

  //   .item {
  //     position: relative;

  //     color: #808080;
  //     font-size: 40rpx;
  //     line-height: 58rpx;

  //     transition: color .3s;

  //     .icon {
  //       position: absolute;
  //       bottom: -4rpx;
  //       left: 50%;
  //       transform: translateX(-50%)scale(1);

  //       width: 18rpx;
  //       border: 3rpx solid #808080;
  //       border-radius: 3rpx;

  //       transition: border-color .3s;
  //     }

  //     &.active {
  //       color: #945D2C;

  //       .icon {
  //         border-color: #945D2C;
  //       }
  //     }
  //   }
  // }

  .box {
    .lock-mask {
      color: #FDA820;

      .lock-icon {
        background-color: #FDA820;
      }
    }
  }
}

.btns {
  margin: 58rpx 0 90rpx;

  display: flex;
  justify-content: center;

  .btn {
    width: 296rpx;
    height: 96rpx;

    margin: 0 14rpx;

    font-size: 40rpx;
    line-height: 96rpx;
    text-align: center;
  }
}
</style>